<div id="articles" v-cloak>
  <div style="max-width: 1200px;" class="container-fluid mx-auto" purpose="page-container">
      <div purpose="category-title">
        <div class="d-flex flex-md-row flex-column justify-content-between align-items-md-end">
          <div class="d-flex flex-column justify-content-between align-self-start float-left">
            <h1>{{articleCategory}}</h1>
            <p>{{categoryDescription}}</p>
          </div>
          <div purpose="search-and-releases-button" class="d-flex flex-md-row flex-column">
            <div class="d-flex flex-column align-self-md-end" v-if="category === 'releases'">
              <a purpose="changelog-button" href="https://github.com/fleetdm/fleet/releases" target="_blank" no-icon><img alt="GitHub logo" src="/images/logo-github-dark-24x24@2x.png"/>View changelog</a>
            </div>
            <div purpose="search" id="docsearch-query" v-if="['articles', 'announcements', 'guides', 'releases'].includes(category)">
              <div purpose="disabled-search" class="d-flex w-100">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text border-0 bg-transparent pl-3" >
                      <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
                    </span>
                  </div>
                  <div class="form-control border-0 ">
                  <input class="docsearch-input pr-1"
                    placeholder="Search" aria-label="Search"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    <div purpose="sidebar-and-articles">
      <div purpose="sidebar">
        <div purpose="nav-links">
          <a href="/announcements">News</a>
          <a href="/testimonials">Case studies</a>
          <a href="/articles">Articles</a>
          <a href="/releases">Releases</a>
        </div>
        <!-- <div purpose="sidebar-cta">
          <a href="<% if(typeof me === 'undefined') {%>/register<% } else { %>/start<% } %>">
          <div purpose="cta-image"></div>
          <div purpose="cta-text">
            <% if(typeof me === 'undefined'){ %>
              <h4>Try it out</h4>
              <p>See what Fleet can do</p>
              <a purpose="cta-button" class="btn btn-primary docs-cta-continue-button" href="/register">Start now</a>
            <% } else if (['2 - Aware', '3 - Intrigued'].includes(me.psychologicalStage)) {%>
              <h4>Tried Fleet yet?</h4>
              <p>Continue getting started with Fleet</p>
              <a purpose="cta-button" class="btn btn-primary" href="/start">Continue</a>
            <% } else if (me.psychologicalStage === '4 - Has use case') {%>
              <h4>Feeling confident?</h4>
              <p>Get set up with Fleet</p>
              <a purpose="cta-button" class="btn btn-primary" hredf="/start">Continue</a>
            <% } else if (['5 - Personally confident', '6 - Has team buy-in'].includes(me.psychologicalStage)) {%>
              <h4>Talk to the team</h4>
              <p>Let’s get you set up!</p>
              <a purpose="cta-button" class="btn btn-primary" href="/start">Continue</a>
            <%}%>
            <div purpose="cta-platform-icons" class="d-flex flex-row justify-content-between align-items-center">
              <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS" />
              <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows" />
              <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux" />
            </div>
          </div>
          </a>
        </div> -->
      </div>
      <div purpose="article-rows">
        <a :href="article.url" purpose="article-row" class="d-flex flex-lg-row flex-row justify-content-between" v-for="article in articles">
          <div purpose="article-name-and-description" class="d-flex flex-column">
            <div class="d-flex flex-column">
              <p purpose="article-name">{{article.meta.articleTitle}}</p>
            </div>
            <div purpose="article-description" v-if="article.meta.description"><p>{{article.meta.description}}</p></div>
            <div purpose="publish-date"><js-timestamp format="billing" :at="article.meta.publishedOn"></js-timestamp></div>
          </div>
          <div class="d-flex flex-column justify-content-center">
            <svg purpose="animated-arrow" style="stroke: #192147;" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
              <path purpose="arrow-line" d="M1 6H9" stroke-width="2" stroke-linecap="round"/>
              <path purpose="chevron" d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
        </a>
      </div>
    </div>
<!--     <div purpose="articles" class="card-deck d-flex justify-content-center" v-else>
      <div purpose="article-card" class="card" v-for="article in articles">
        <a purpose="article-card-link" :href="article.url">
          <img style="width: 100%; height: auto;" :src="[article.meta.articleImageUrl ? article.meta.articleImageUrl : '/images/blog-fleet-logo-white-background-800x450@2x.png']" alt="Article hero image">
        </a>
        <div purpose="article-card-body" class="card-body d-flex flex-column">
          <p purpose="category-name" class="pb-2 mb-0">{{article.meta.category}}</p>
          <a purpose="article-title" :href="article.url"><h5>{{article.meta.articleTitle}}</h5></a>
          <div purpose="article-details" class="d-flex mt-auto flex-row align-items-center">
            <img alt="The author's GitHub profile picture" style="height: 32px; width: 32px; border-radius: 100%;" :src="'https://github.com/'+article.meta.authorGitHubUsername+'.png?size=200'">
            <p class="pl-2 font-weight-bold">{{article.meta.authorFullName}}</p>
          </div>
        </div>
      </div>
      <div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
      </div>
      <div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
      </div>
      <div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
      </div>
    </div> -->
  </div>
  <signup-modal></signup-modal>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
